<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行换色</title>
    <style type="text/css">
        table {
            width: 500px;
            margin: 0 auto;
            border-collapse: collapse;
        }

        td, th {
            border: 1px solid blue;
            text-align: center;
        }

    </style>
</head>
<body>
<table>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>1</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>2</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>3</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>4</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>5</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>6</td>
        <td></td>
        <td></td>
    </tr>
</table>
<!--
要求：1-6行，要求奇数行和偶数行分别设置不同的背景色
1、奇数行设置背景颜色
2、偶数行设置背景颜色
思路：获取所有的tr标签对象，循环遍历，根据索引i%2区分奇偶
-->
<script>
    // 1、获取到所有的行tr标签对象
    var rows = document.getElementsByTagName("tr");
    for (var i = 0; i < rows.length; i++) {
        if (i ===0) {
            continue;
        }
        if (i % 2) {
            rows[i].style.backgroundColor = "lightblue";
        } else {
            rows[i].style.backgroundColor = "lightgreen";
        }
    }
</script>
</body>
</html>